<template>
  <div>
    <div class="weizhi">
      <div class="wq" @click='goback'><div class="el-icon-back" ></div></div>
      <div class="lol">支付收银台</div>
    </div>
    <div class="zhifu">
      <div class="xiao">订单号:1234567898521356841</div>
      <div class="xiao">物流费:523元</div>
      <div class="xiao">优惠:无</div>
      <div class="oo">
        订单总额:
        <div class="prices">254896</div>
        元
      </div>
    </div>
    <el-divider></el-divider>
    <div class="lil">
      <div class="han">选择支付方式</div>
      <div class="poiu">
        <div class="ppps">
          <img
            src="http://www.axshare.cn/gsc/HONC57/b1/6f/04/b16f04d9f7de4bd4b0518f49db988d03/images/选择支付方式/u2374.png?token=3c356c7d053e0c0e39537b6a469502cf28fdf165af51f70b287731ba1569edc7"
            width="20px"
            height="20px"
          />支付宝支付
        </div>
        <div class="redi">
          <input
            type="radio"
            v-model="name"
            value="支付宝"
            @click="but(name)"
          />
        </div>
      </div>
      <div class="poiu">
        <div class="ppps">
          <img
            src="http://www.axshare.cn/gsc/HONC57/b1/6f/04/b16f04d9f7de4bd4b0518f49db988d03/images/选择支付方式/u2382.png?token=1c11ea2fde79370d74da506c76ca8f10b9e32705cef1f6a1e025116e380c168a"
            width="20px"
            height="20px"
          />微信支付
        </div>
        <div class="redi">
          <input type="radio" v-model="name" value="微信" @click="but(name)" />
        </div>
      </div>
      <div class="poiu">
        <div class="ppps">
          <img
            src="http://www.axshare.cn/gsc/HONC57/b1/6f/04/b16f04d9f7de4bd4b0518f49db988d03/images/选择支付方式/u2393.png?token=cd26c265bbd2b508df863f07ba4fe0ec5099532ad7762198c8815565b95f2303"
            width="20px"
            height="20px"
          />银联支付
        </div>
        <div class="redi">
          <input
            type="radio"
            v-model="name"
            value="银行卡"
            @click="but(name)"
          />
        </div>
      </div>
      <div class="poiu">
        <div class="ppps">
          <img
            src="http://www.axshare.cn/gsc/HONC57/b1/6f/04/b16f04d9f7de4bd4b0518f49db988d03/images/选择支付方式/u2404.png?token=ce22ed5c8c68fd1072b9e05c65078512eb23209c3d75836cc048963d2af73973"
            width="20px"
            height="20px"
          />货到付款
        </div>
        <div class="redi">
          <input type="radio" v-model="name" value="本人" @click="but(name)" />
        </div>
      </div>
    </div>
    <div class="butt" @click='proments'>{{ names }}支付￥254896</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio1: 1,
      names: "",
      name: ""
    };
  },
  methods: {
    but(name) {
      let that = this;
      //    that.names=this.name;
      console.info(name);
      that.names = name;
    },
    goback(){
      let that=this;
      
      this.$router.push({
        path: "/order"

      });
    },
    proments(){
      let that=this
      that.$message('支付成功');
      that.$router.push({
        path:'/',
      })
    }
  }
};
</script>
<style>
.weizhi {
  width: 100%;
  height: 50px;
  background: red;
  font-size: 25px;
  color: aliceblue;

  display: flex;
  flex-direction: row;
}
.wq {
  width: 10%;
  height: 50px;
  text-align: left;
  line-height: 50px;
}
.lol {
  width: 90%;
  height: 50px;
  line-height: 50px;
}
.zhifu {
  width: 100%;
  height: 145px;
}
.pl {
  width: 100%;
  height: 20px;
}
.lil {
  width: 100%;
  height: 400px;
  background: lavender;
}
.xiao {
  width: 100%;
  height: 37px;
  text-align: left;
}
.oo {
  width: 100%;
  height: 37px;
  text-align: left;
  display: flex;
  flex-direction: row;
}
.prices {
  font-size: 18px;
  color: red;
}
.han {
  width: 100%;
  height: 60px;
  font-size: 23px;
  text-align: left;
  line-height: 50px;
  background: white;
}
.poiu {
  width: 100%;
  height: 50px;
  border-top: 1px solid lightgray;
  font-size: 23px;
  display: flex;
  flex-direction: row;
  background: white;
}
.ppps {
  width: 50%;
  height: 50px;
  text-align: left;
  line-height: 50px;
}
.redi {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: right;
}
.redi input {
  width: 20%;
  height: 30px;
}
.butt {
  width: 100%;
  height: 50px;
  background: red;
  font-size: 23px;
  line-height: 50px;
  color: white;
}
</style>
